<!--
 * @Author: your name
 * @Date: 2021-09-03 21:34:26
 * @LastEditTime: 2021-09-03 21:59:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /teacher-post-card/src/views/write.vue
-->
<template>
  <div
    class="container container_replace"
    :style="{ height: bodyHeight + 'px' }"
  >
    <div style="height: 335px"></div>
    <!-- 明信片内容输入框 -->
    <el-input
      type="textarea"
      class="card-textarea"
      :rows="3"
      :autosize="{ minRows: 3, maxRows: 5 }"
      placeholder="请输入..."
      v-model="cardCxt"
      :show-word-limit="true"
      :maxlength="120"
      style="
        background: transparent !important;
        font-size: 20px;
        border: none;
        max-width: 750px;
        margin-bottom: 20px;
      "
    ></el-input>
    <!-- 确定按钮 -->
    <el-button class="ballon" plain @click="toFinish">
      <img
        src="https://dgut-teacher-postcard-1255644734.file.myqcloud.com/images/input-button.png"
        style="width: 180px"
        alt=""
      />
    </el-button>
  </div>
</template>

<script setup>
import { getCurrentInstance, getCurrentScope, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const cardCxt = ref("");
const postCardPicUrl = useRoute().query.postCardPicUrl;
const bodyHeight = ref(0);
const router = useRouter();
const toFinish = () => {
  if (cardCxt.value == "") {
    alert("明信片内容为空，请重新输入");
    return;
  }
  router.push({
    path: "/finish",
    query: { url: postCardPicUrl, context: cardCxt.value },
  });
};
onMounted(() => {
  bodyHeight.value = document.documentElement.clientHeight;
});
</script>

<style scoped>
.container_replace {
  background-image: url("https://dgut-teacher-postcard-1255644734.file.myqcloud.com/images/input-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: flex-start;
}
.el-button,
.el-button.is-plain:focus,
.el-button.is-plain:hover,
.el-button.is-plain:active {
  background: none;
  border: none;
}

.el-textarea > span {
  background-color: transparent !important;
}
</style>
